<template>
	<view>
		<!-- 搜索区域 -->
		<view class="searchbar">
			<view class="searchbar-list">
				<image style="width: 46rpx;height: 46rpx;" src="../../static/icon/searcha.png"></image>
				<input class="searchbar-input" @confirm="searchdata" v-model.trim="searchText" confirm-type="search"
					maxlength="26" type="text" placeholder-style="color:#a6a7a8;
						font-size:29rpx;" placeholder="搜索商品名称" />
				<image v-if="searchText" @click="empty" style="width: 33rpx;height: 33rpx;"
					src="../../static/icon/close.png"></image>
			</view>
			<view @click="cancela" style="color: #353535;font-size: 30rpx;">取消</view>
		</view>

		<!-- 搜索记录区域 -->
		<view v-if="nodata==false">
			<view v-if="dataList==''" class="s-block">
				<view v-if="hList.length > 0" class="recordbox flex ac jb">
					<view class="record flex ac">
						<image style="width: 50rpx;height: 50rpx;" src="../../static/icon/history.png"></image>
						<view>最近搜索</view>
					</view>
					<view @click="deletea" class="delete">
						<image src="../../static/icon/delete.png"></image>
					</view>
				</view>
				<view v-if="hList.length > 0" class="recordlist">
					<view class="recordtext" v-for="(item,index) in hList" :key="index" @click="keywordsClick(item)">
						{{item}}
					</view>
				</view>
			</view>
		</view>

		<view v-if="dataList.length!==0" class="listbox">
			<view class="left">
				<block v-for="(item,index) in dataList" :key="index">
					<view v-if="index%2==0" class="item">
						<view class="item-img">
							<image mode="aspectFill" class="item-imgurl" :src="item.main_picture"></image>
							<image class="desc-bg" mode="widthFix" src="../../static/icon/fixed.png"></image>
						</view>
						<view class="item-title">{{item.name}}</view>
						<view class="item-platform jb">
							<view class="item-platform-left flex ac">
								<view class="flex ac">
									<text
										style="font-size: 28rpx;color:#FF411F;font-weight: 600;">{{item.currency}}</text>
									<text style="font-size: 23rpx;color:#FF411F;">金币</text>
								</view>
								<view class="flex ac"
									style="text-decoration:line-through;margin-left:10rpx;color:#B1B1B1;">
									<text style="font-size: 25rpx;">25</text>
									<text style="font-size: 20rpx;">金币</text>
								</view>
							</view>
							<!-- <view class="item-platform-right" style="background-color: #3CE67A;">3台/空闲中</view> -->
							<view class="item-platform-right" style="background-color: #FF5736;">
								3台/火爆中</view>
						</view>
					</view>
				</block>
			</view>
			<view class="right">
				<block v-for="(item,index) in dataList" :key="index">
					<view v-if="index%2==1" class="item">
						<view class="item-img">
							<image mode="aspectFill" class="item-imgurl" :src="item.main_picture"></image>
							<image class="desc-bg" mode="widthFix" src="../../static/icon/fixed.png"></image>
						</view>
						<view class="item-title">{{item.name}}</view>
						<view class="item-platform jb">
							<view class="item-platform-left flex ac">
								<view class="flex ac">
									<text
										style="font-size: 28rpx;color:#FF411F;font-weight: 600;">{{item.currency}}</text>
									<text style="font-size: 23rpx;color:#FF411F;">金币</text>
								</view>
								<view class="flex ac"
									style="text-decoration:line-through;margin-left:10rpx;color:#B1B1B1;">
									<text style="font-size: 25rpx;">25</text>
									<text style="font-size: 20rpx;">金币</text>
								</view>
							</view>
							<!-- <view class="item-platform-right" style="background-color: #3CE67A;">3台/空闲中</view> -->
							<view class="item-platform-right" style="background-color: #FF5736;">
								3台/火爆中</view>
						</view>
					</view>
				</block>
			</view>
		</view>

		<!-- 暂无数据 -->
		<view v-if="nodata==true" class="nodatabox">
			<view>没找到相关宝贝，换个关键词试试吧</view>
		</view>

		<!-- 弹窗样式 -->
		<u-popup v-model="show" mode="center" border-radius="20">
			<view style="width: 600rpx;">
				<view class="popuptitle">是否删除该地址？</view>
				<view class="popupview flex ac jb">
					<view class="popupbuttom popup-cancel" @click="decancel">取消</view>
					<view class="popupbuttom popup-delete" @click="deleted">删除</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import {
		request
	} from "@/static/common.js";
	export default {
		data() {
			return {
				show: false,
				searchText: '', //搜索关键词
				hList: uni.getStorageSync('search_cache'), //历史记录
				dataList: [],
				// dataList: [{
				// 		picture: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/439721c84a1488c844399efcd0edddf7.jpg',
				// 		title: '粉色卡皮巴拉吐泡泡挂件',
				// 		coins: '18',
				// 	},
				// 	{
				// 		picture: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/15c7d414c9f46f54d83d49dc21e0a424.png',
				// 		title: '50cm原创正版嘟嘟喵记忆棉枕头',
				// 		coins: '18',
				// 	},
				// 	{
				// 		picture: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/c19d817fc2f064766ee43bbbdb6e88a4.png',
				// 		title: '水果白面猴挂件',
				// 		coins: '18',
				// 	},
				// 	{
				// 		picture: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/439721c84a1488c844399efcd0edddf7.jpg',
				// 		title: '粉色卡皮巴拉吐泡泡挂件',
				// 		coins: '18',
				// 	},
				// 	{
				// 		picture: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/ecfd1e09e11c926217cd951d41240abb.png',
				// 		title: '70cm动物毛毛虫',
				// 		coins: '18',
				// 	},
				// 	{
				// 		picture: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/a9004e737568bbe191980031ac1dfde8.png',
				// 		title: '微笑小熊斜挎包',
				// 		coins: '18',
				// 	},
				// ],

				pageIndex: 1,
				nodata: false,
				hasMore: false,

			}
		},

		onLoad() {

		},

		// 上拉触底事件
		onReachBottom: function() {
			var that = this
			if (that.hasMore) {
				that.commoditydata("parameter")
			}
		},

		methods: {
			searchdata(e) {
				this.pageIndex = 1
				this.dataList = []
				this.commoditydata()
			},

			//请求商品列表数据
			async commoditydata(e) {
				var zhi = e
				let apply = await request(`${getApp().globalData.http}commodity/user_list_commodity`, {
					'X-Requested-With': 'XMLHttpRequest',
					'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
				}, "POST", {
					page_size: 1,
					page_num: this.pageIndex,
					exchange: 1,
					type_id: '',
					name: this.searchText,
					hot: '',
					label: '',
					currency: '',
				})
				this.dataList = this.dataList.concat(apply.data.data)

				// 上拉加载数据
				if (apply.data.page_num == apply.data.total_num) {
					this.hasMore = false
				} else {
					this.hasMore = true
				}
				if (apply.data.data.length == 0) {
					this.nodata = true
				}
				if (apply.data.data.length !== 0) {
					this.nodata = false
				}

				if (this.hasMore) {
					this.pageIndex = this.pageIndex + 1
				}

				if (zhi == 'parameter') {
					console.log("触发")
				} else {
					this.sousuo()
				}

			},

			//返回上一页
			cancela(e) {
				uni.navigateBack({
					dalta: 1,
				})
			},

			//点击搜索内容事件
			keywordsClick(item) {
				this.pageIndex = 1
				this.searchText = item;
				this.commoditydata("parameter")

			},

			//清空搜索字体
			empty(e) {
				this.searchText = ''
				this.nodata = false
				this.dataList = []
			},

			//打开删除弹窗
			deletea(e) {
				this.show = true
			},

			//删除搜索历史记录
			deleted(e) {
				this.hList = [];
				uni.setStorage({
					key: 'search_cache',
					data: []
				});
				this.show = false
			},

			//关闭删除弹窗
			decancel(e) {
				this.show = false
			},

			//记录搜索历史
			sousuo(e) {
				let _this = this;
				if (_this.searchText == '') {
					uni.showToast({
						title: '请输入商品名称',
						icon: 'none',
						duration: 1000
					});
				} else {
					uni.getStorage({
						key: 'search_cache',
						success(res) {
							let list = res.data;
							if (list.length > 10) {
								for (let item of list) {
									if (item == _this.searchText) {
										return;
									}
								}
								list.pop();
								list.unshift(_this.searchText);
							} else {
								for (let item of list) {
									if (item == _this.searchText) {
										return;
									}
								}
								list.unshift(_this.searchText);
							}
							_this.hList = list;
							uni.setStorage({
								key: 'search_cache',
								data: _this.hList
							});

						},
						fail() {
							_this.hList = [];
							_this.hList.push(_this.searchText);
							uni.setStorage({
								key: 'search_cache',
								data: _this.hList
							});
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	@import url("search.css");

	.nodatabox {
		text-align: center;
		padding-top: 38rpx;
		color: #353535;
		font-size: 29rpx;
	}

	.listbox {
		background: #f7f7f8;
		padding-top: 20rpx;
	}

	// 弹窗
	.popuptitle {
		text-align: center;
		font-size: 36rpx;
		color: #424040;
		margin-top: 50rpx;
		margin-bottom: 50rpx;
	}

	.popupview {
		padding: 20rpx 30rpx 70rpx 30rpx;
	}

	.popupbuttom {
		width: 250rpx;
		height: 80rpx;
		border-radius: 50rpx;
		background-color: red;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
	}

	.popup-cancel {
		background-color: #D7E2EF;
		color: #2D2D2D;
	}

	.popup-delete {
		background-image: linear-gradient(270deg, #FF6144 15%, #FF99C9 100%);
		color: #ffffff;
	}
</style>